<template>
  <!-- 
  <img src="../assets/img/swiper.jpg" alt />-->
  <div class="index">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div class="indexmain">
      <div class="mainnnav">
        <img src="../assets/img/tu1.jpg" alt />
        <img src="../assets/img/tu2.jpg" alt />
        <img src="../assets/img/tu3.jpg" alt />
        <img src="../assets/img/tu4.jpg" alt />
      </div>
      <div class="nav">
        <ul class="clear">
          <li>分类 :</li>
          <li class="active">全部</li>
          <li>餐饮</li>
          <li>酒店</li>
          <li>休闲</li>
          <li>电影</li>
          <li>汽车装饰</li>
          <li>家政服务</li>
        </ul>
      </div>
      <div class="indexmainnav clear">
        <div @click="pai(1)" :class="{active:paixiu==1}">评分最高</div>
        <div @click="pai(0)" :class="{active:paixiu==0}">价格</div>
        <div @click="pai(2)" :class="{active:paixiu==2}">销量</div>
      </div>
      <div class="shangjiamain clear">
        <shangjiamaincoll
          v-for="(item,index) in shangjiamaincoll"
          v-show="index<12*danqian&&index>=12*(danqian-1)"
          :item="item"
          :key="item.id"
        />
        <div class="fenyeqi">
          <fenyeqi @danqainye="danqainye($event)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import shangjiamaincoll from "@/components/shangjiamaincoll.vue";
import fenyeqi from "@/components/fenyeqi.vue";
import Swiper from "swiper";
import axios from "axios";
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      danqian: 1,
      paixiu: 2,
      shangjiamaincoll: [
        {
          id: 1,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang3.png"
        },
        {
          id: 2,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang1.png"
        },
        {
          id: 3,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang2.png"
        },
        {
          id: 4,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang4.png"
        },
        {
          id: 5,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang3.png"
        },
        {
          id: 6,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang1.png"
        },
        {
          id: 7,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang2.png"
        },
        {
          id: 8,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang4.png"
        },
        {
          id: 9,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang3.png"
        },
        {
          id: 10,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang1.png"
        },
        {
          id: 11,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang2.png"
        },
        {
          id: 12,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang4.png"
        },
        {
          id: 13,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang3.png"
        },
        {
          id: 14,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang1.png"
        },
        {
          id: 15,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang2.png"
        },
        {
          id: 16,
          name: "阳澄湖大闸蟹",
          jiage: "￥62/人",
          dizhi: "浙江省台州市温岭市人民西路2号",
          url: "shang4.png"
        }
      ]
    };
  },
  name: "index",
  components: {
    shangjiamaincoll,
    fenyeqi
  },
  methods: {
    danqainye(e) {
      this.danqian = e;
    },
    pai(e) {
      this.paixiu = e;
      var _this = this;
      var url = this.$store.state.url;
      axios.post(url + "indexshangjia", { paixiu: _this.paixiu }).then(
        res => {
          // 成功回调
          if (res.data.code == "200") {
            _this.shangjiamaincoll = res.data.data;
            window.console.log(res.data);
          }
        },
        res => {
          window.console.log(res);
          // 错误回调
        }
      );
    }
  },
  mounted() {
    var _this = this;
    var url = this.$store.state.url;
    axios.post(url + "indexshangjia", { paixiu: _this.paixiu }).then(
      res => {
        // 成功回调
        if (res.data.code == "200") {
          _this.shangjiamaincoll = res.data.data;
          window.console.log(res.data);
          this.$store.commit("zongye12", res.data.data.length);
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
    this.swiper = new Swiper(".swiper-container", {
      autoplay: true, //自动播放
      loop: true, //循环播放
      delay: 3000, //每张图间隔三秒
      //分页器
      pagination: {
        el: ".swiper-pagination"
      },
      //左右前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>
<style scoped>
.swiper-container img {
  width: 100%;
}
.indexmain {
  width: 80%;
  margin: 0px auto;
}
.indexmain .mainnnav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.6rem 0px;
}
.indexmain .mainnnav img {
  width: 24%;
}

.guding {
  width: 100%;
  position: fixed;
  top: 0px;
  background-color: #fff;
  z-index: 11;
}
.nav ul {
  border-bottom: 1px solid #ccc;
  list-style: none;
  margin: 0px;
  padding: 0px 0px 0.6rem 0px;
  font-size: 0.8rem;
}
.nav ul li {
  float: left;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.nav ul li.active {
  background-color: #498e3d;
  color: aliceblue;
}
.nav ul li:first-of-type {
  padding-left: 0px;
}
.indexmainnav div {
  padding: 0.2rem 0.5rem;
  float: right;
  border: 1px solid #ccc;
  margin: 0.5rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.indexmainnav div.active {
  border: 1px solid #498e3d;
  color: #498e3d;
}

.shangjiamain {
  display: flex;
  flex-wrap: wrap;
}
.zidingyi {
  color: #ed7325;
}
.fenyeqi {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>